<template>
	<!-- 球馆 statr -->
	<view class="meadowlands">
		<view class="bg1">
			<view></view>
		</view>
		<!-- <view class="dian"></view> -->

		<uv-navbar :fixed="true" :placeholder="true" bg-color="transparent" @leftClick="back">
			<image slot="left" src="https://www.guizhouqy.com/mini/back.png" style="width: 48rpx;height: 48rpx;">
			</image>
			<text slot="center" style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;">助教</text>
		</uv-navbar>

		<view class="box1">
			<view class="top">
				<view class="miscellaneous">
					<view class="left">
						<image :src="tutor.avatar" mode="" @click="imgUpload('avatar')"></image>
						<view class="sundries">
							<uni-easyinput :inputBorder="false" suffixIcon="" v-model="tutor.assistant_name"
								style="text-align: right;" :styles="nickStyle" @blur="changeInfo"></uni-easyinput>
							<uni-easyinput :inputBorder="false" suffixIcon="" v-model="tutor.signature"
								style="text-align: right;" :styles="nickStyle" @blur="changeInfo"></uni-easyinput>
							<!-- <view class="name">{{tutor.assistant_name}}</view> -->
							<!-- <view class="tip">{{tutor.signature}}</view> -->
						</view>
					</view>
					<view class="right">
						{{tutor.price}}元/分钟
					</view>
				</view>
				<view class="balance">
					<view class="left">
						<text class="name">我的余额</text>
						<view class="money">
							<text style="font-size: 48rpx;">{{tutor.balance}}</text>
							<text style="margin-left: 8rpx;font-size: 24rpx;">元</text>
						</view>
					</view>
					<!-- <view class="right">
						<view class="">提现</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="box4">
			<view class="plate">
				<view class="title">生活照</view>
				<view class="imageList">
					<view class="item" v-for="(item,index) in candidPhoto" :key="index">
						<image class="img" :src="item" mode=""></image>
						<image class="close" src="https://www.guizhouqy.com/mini/close.png" mode=""
							@click="cloneImg(index)"></image>
					</view>
					<view class="addImg" @click="imgUpload('candidPhoto')">
						<image src="https://www.guizhouqy.com/mini/plus.png" mode=""></image>
						<text>添加生活照</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="item">
				<view class="name">我的订单</view>
				<view class="menu">
					<view @click="navTo('/pages/order/order?status=2&type=2')">
						<image src="https://www.guizhouqy.com/mini/item15.png" mode=""></image>
						<text>待确认</text>
					</view>
					<view @click="navTo('/pages/order/order?status=3&type=2')">
						<image src="https://www.guizhouqy.com/mini/item14.png" mode=""></image>
						<text>待完成</text>
					</view>
					<view @click="navTo('/pages/order/order?status=4&type=2')">
						<image src="https://www.guizhouqy.com/mini/item10.png" mode=""></image>
						<text>已完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box3">
			<view class="item" @click="navTo('/pages/public/agreement?id=10')">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item11.png" mode=""></image>
					<text>平台介绍</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/public/agreement?id=11')">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item12.png" mode=""></image>
					<text>助教协议</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/my/bill')">
				<view class="left">
					<image src="https://www.guizhouqy.com/mini/item13.png" mode=""></image>
					<text>余额账单</text>
				</view>
				<view class="right">
					<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 球馆 end -->
</template>

<script>
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	import {
		BASE_URL,
		HEADER,
		TOKEN
	} from '@/config/app';
	export default {
		data() {
			return {
				candidPhoto: [],
				tutor: {
					assistant_name: "",
					avatar: "",
					balance: "",
					candid_photo: [],
					id: 0,
					price: "",
					signature: "",
					user_id: 0,
				},
				nickStyle: {
					color: '#FFFFFF'
				}
			}
		},
		onLoad(option) {
			this.getData(option.id)
			// this.getUserBaseInfo()
		},
		onShow() {
			let theme = uni.getStorageSync('theme')
			this.fontColor = theme.color
			this.themeBg = 'linear-gradient(90deg, ' + theme.bg1 + ', ' + theme.bg2 + ')'
			this.isLogin = this.$store.getters.isLogin

			if (this.isLogin) {
				// this.getUserInfo()
				// this.getUserBaseInfo()
			}
		},
		methods: {
			// 助教名称和助教签名修改
			changeInfo() {
				this.saveAssistantData(this.tutor)
			},
			cloneImg(index) {
				this.candidPhoto.splice(index, 1)
				this.tutor.candid_photo = this.candidPhoto
				this.saveAssistantData(this.tutor)
			},
			// 获取用户基础信息
			async getUserBaseInfo() {
				let res = await this.$api.user.getUserBaseInfo.get()
			},
			//获取助教详情
			async getData(id) {
				uni.showLoading({
					title: '请稍后'
				})
				let res = await this.$api.meadowlands.getAssistantDetails.get({
					user_id: id
				})
				uni.hideLoading()
				if (res.code == 0) {
					this.tutor = res.data;
					this.candidPhoto = res.data.candid_photo ?? [];
				} else {
					this.$tool.error(res.msg);
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			navTo(url) {
				console.log("url", url)
				uni.navigateTo({
					url
				})
				return
				if (!this.isLogin) {
					goLogin();
				}
			},
			async saveAssistantData(data) {
				uni.showLoading({
					title: '保存中'
				})
				let res = await this.$api.meadowlands.assistantAdd.post({
					...data,
					candid_photo: JSON.stringify(data.candid_photo)
				})
				if (res.code == 0) {
					uni.hideLoading()
				}
			},
			// 图片上传通用方法 type: avatar（头像）candidPhoto（生活照）
			imgUpload(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (file) => {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: BASE_URL + '/api/Common/uploadFile',
							filePath: file.tempFilePaths[0],
							name: 'file',
							success: (result) => {
								uni.hideLoading();
								let res = JSON.parse(result.data);
								if (res.code != 0) {
									this.$tool.error(res.msg)
									return
								}

								if (type == 'avatar') {
									this.tutor.avatar = res.data.url
								}

								if (type == 'candidPhoto') {
									this.candidPhoto.push(res.data.url)
									this.tutor.candid_photo = this.candidPhoto
								}

								this.saveAssistantData(this.tutor) // 上传完成后保存
							}
						});
					},
					fail(e) {
						console.log(e);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.meadowlands {
		background: #240F41;
		color: #FFFFFF;
		min-height: 100vh;
		padding-bottom: 50rpx;

		.bg1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: calc(50%-59px);

			view {
				width: 118px;
				height: 118px;
				background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
				box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.9;
				filter: blur(90px);
			}
		}

		.dian {
			width: 118px;
			height: 118px;
			background: linear-gradient(90deg, #1F87EF 0%, #1F87EF 100%);
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.9;
			filter: blur(90px);
			position: absolute;
			left: 0;
			top: 20px;
		}

		.header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 38rpx;
			padding-top: 30px;

			image {
				width: 48rpx;
				height: 48rpx;
				z-index: 999;
			}
		}

		.box1 {
			padding: 0 26rpx;
			z-index: 999;

			// margin-top: 40rpx;
			.top {
				width: 100%;
				background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #9A24B9;
				margin-top: 24rpx;

				.miscellaneous {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #C829F3;
					padding-top: 30rpx;
					padding-bottom: 32rpx;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding-left: 32rpx;
						box-sizing: border-box;
						flex: 1;

						image {
							width: 128rpx;
							height: 128rpx;
							border-radius: 116rpx 116rpx 116rpx 116rpx;
							border: 4rpx solid #9A24B9;
							border-radius: 50%;
						}

						.sundries {
							width: calc(100% - 160rpx);
							margin-left: 32rpx;

							.name {
								font-weight: bold;
								font-size: 40rpx;
								color: #FFFFFF;
							}

							.tip {
								font-weight: bold;
								font-size: 24rpx;
								color: #999999;
								margin-top: 8rpx;
							}
						}
					}

					.right {
						padding-right: 16rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						box-sizing: border-box;
					}
				}

				.balance {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-top: 32rpx;
					padding-bottom: 34rpx;

					.left {
						padding-left: 24rpx;

						.name {
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.money {
							margin-top: 16rpx;
						}
					}

					.right {
						padding-right: 20rpx;

						view {
							width: 128rpx;
							height: 48rpx;
							background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
							border-radius: 48rpx 48rpx 48rpx 48rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.box4 {
			padding: 0 26rpx;
			margin-top: 16rpx;

			.plate {
				width: 100%;
				background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					padding-left: 24rpx;
					padding-top: 16rpx;
				}

				.imageList {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 0 24rpx;
					margin-top: 40rpx;
					padding-bottom: 20rpx;

					.item {
						width: 22%;
						margin-right: 3%;
						margin-bottom: 20rpx;
						position: relative;

						.img {
							width: 100%;
							height: 136rpx;
						}

						.close {
							position: absolute;
							top: -10rpx;
							width: 32rpx;
							height: 32rpx;
							right: -10rpx;
						}
					}

					.addImg {
						width: 136rpx;
						height: 136rpx;
						background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #9A24B9;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-weight: 500;
							font-size: 22rpx;
							color: #FFFFFF;
							margin-top: 16rpx;
						}
					}
				}
			}
		}

		.box2 {
			padding: 0 24rpx;
			margin-top: 32rpx;

			.item {
				width: 100%;
				height: 224rpx;
				background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 32rpx;

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					padding-top: 16rpx;
					padding-left: 24rpx;
				}

				.menu {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;
					padding: 0 32rpx;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 32rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.box3 {
			padding: 0 26rpx;

			.item {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #9A24B9;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 16rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						color: #FFFFFF;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}

				.right {
					padding-right: 30rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>